<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width,initial-scale=1.0" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>系统管理</title>
  <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
</head>

<body>
  <div class="container">
    <h1>Table Treegrid</h1>
    <table id="table"></table>
  </div>
</body>
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../assets/bootstrap-table/src/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
  var $table = $('#table');
  $(function() {
    $table.bootstrapTable({
      url: '../json/treegrid.json',
      height: $(window).height(),
      striped: true,
      sidePagination: 'server',
      idField: 'id',
      columns: [
        {
          field: 'ck',
          checkbox: true
        },
        {
          field: 'name',
          title: '名称'
        },
        // {field: 'id', title: '编号', sortable: true, align: 'center'},
        // {field: 'pid', title: '所属上级'},
        {
          field: 'status',
          title: '状态',
          sortable: true,
          align: 'center',
          formatter: 'statusFormatter'
        },
        {
          field: 'permissionValue',
          title: '权限值'
        }
      ],
      // bootstrap-table-tree-column.js 插件配置
      // treeShowField: 'name',
      // parentIdField: 'pid'
      // bootstrap-table-tree-column.js 插件配置

      // bootstrap-table-treegrid.js 插件配置
      treeShowField: 'name',
      parentIdField: 'pid',
      onLoadSuccess: function(data) {
        console.log('load');
        // jquery.treegrid.js
        $table.treegrid({
          // initialState: 'collapsed',
          treeColumn: 1,
          // expanderExpandedClass: 'glyphicon glyphicon-minus',
          // expanderCollapsedClass: 'glyphicon glyphicon-plus',
          onChange: function() {
            $table.bootstrapTable('resetWidth');
          }
        });
      }
      // bootstrap-table-treetreegrid.js 插件配置
    });
  });


  // 格式化类型
  function typeFormatter(value, row, index) {
    if (value === 'menu') {
      return '菜单';
    }
    if (value === 'button') {
      return '按钮';
    }
    if (value === 'api') {
      return '接口';
    }
    return '-';
  }

  // 格式化状态
  function statusFormatter(value, row, index) {
    if (value === 1) {
      return '<span class="label label-success">正常</span>';
    } else {
      return '<span class="label label-default">锁定</span>';
    }
  }
</script>

</html>
